import Layout from "../../layout";
import styles from "../../styles/blog.module.scss";

import MDEditor from '@uiw/react-md-editor';
import '@uiw/react-md-editor/dist/markdown-editor.css'
import '@uiw/react-markdown-preview/dist/markdown.css';
import { useRouter } from 'next/router'

export async function getServerSideProps({ params }) {
    let res = await global.$.get({
        url: "blog/blog/" + params.id,
    });
    return {
        props: {
            blog: res.code === 200 ? res.data : {},
            id: params.id,
        }, // will be passed to the page component as props
    };
}
export default function Blog({ blog, userInfo }) {
    const router = useRouter()
    return (
        <Layout title={blog.title} userInfo={userInfo}>
            <div
                className={styles.blogContainer}
                style={{
                    position: "relative",
                    paddingBottom: 20,
                }}
            >
                <div>
                    <a onClick={() => { router.push("/home/1") }}>返回</a>
                </div>
                <div className={styles.title}>{blog.title}</div>
                {/* <div className="detail" dangerouslySetInnerHTML={{ __html: blog.detail }}>
                </div> */}
                <div className="detail">
                    <MDEditor.Markdown source={blog.detail} />
                    {/* <ReactMarkdown children={blog.detail} /> */}
                </div>
            </div>
        </Layout>
    );
}
